<template>
  <div id="imgFu" @mouseover="stop" @mouseout="start">
    <div>
      <img :src="imgs[index]" width="400px" alt="">
    </div>
    <button @click="pre">上一页</button>
    <button @click="next">下一页</button>
  </div>
</template>

<script>
  import p1 from '../assets/1.jpeg';
  import p2 from '../assets/2.jpeg';
  import p3 from '../assets/3.jpeg';
  import p4 from '../assets/4.jpeg';
  import p5 from '../assets/5.jpg';

  var time;
  export default {
    name: "Imgs",
    data() {
      return {
        imgs: [p1, p2, p3, p4, p5],
        index: 0
      }
    },
    methods: {
      auto: function () {
        // 调用下一页代码
        this.next();
      },
      start: function () {
        time = setInterval(this.auto, 1000)
      },
      stop: function () {
        clearInterval(time)
      },
      pre: function () {
        // index 1
        if (this.index-- == 0) {
          this.index = this.imgs.length - 1;
        }
      },
      next: function () {
        if (this.index++ == this.imgs.length - 1) {
          this.index = 0;
        }
      }
    },
    mounted() {
      // 启动 定时器 设置轮播
      time = setInterval(this.auto, 1000)
    }
  }
</script>

<style scoped>
  #imgFu {
    height: 400px;
    width: 400px;
    margin: 0px auto;
    border: 1px solid red;
  }
</style>
